<template>
  <div class="main">
    <div class="screen">
      <div>
        选择市场:
        <div
          class="item"
          :class="{ active: index === activeindex }"
          v-for="(item, index) in screenlist"
          :key="index"
          @click="changeitem(index)"
        >
          {{ item }}
        </div>
      </div>
      <div class="Letter">
        字母分类:
        <div
          class="item"
          :class="{ letteractive: index === letterindex }"
          v-for="(item, index) in Letterlist"
          :key="index"
          @click="changeLetter(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="turning">
      <div class="leftbox">
        <div
          @click="topindex = index"
          :class="{ topactive: index === topindex }"
          v-for="(item, index) in toplist"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="rightbox">
        <span>为您找到1家商家</span
        ><span style="margin-left:0.23rem ; margin-right: 0.23rem;"
          ><span style="color: #E22A1F;">1</span>/1</span
        ><span
          style="border: 0.01rem solid #E8E8E8; height:100%; display:inline-block;padding:0 0.2rem; cursor: pointer;"
          >上一页</span
        ><span
          style="border: 0.01rem solid #E8E8E8; height:100%; display:inline-block;padding:0 0.2rem;margin-right: 0.01rem; cursor: pointer;"
          >下一页</span
        >
      </div>
    </div>
    <div class="result">
      <div class="resultitem">
        <div class="left">
          <div
            style="display: flex; justify-content: center;align-items: center;"
          >
            <img
              src="../../static/popularityimgs/chengxin.png"
              alt=""
              style="display: inline-block !important;height: 75%;"
            />
            <div
              style="font-family: PingFang SC;
font-size: 0.2rem;
font-weight: bold;
display: inline-block;"
            >
              诚信商家
            </div>
          </div>

          <div
            style="font-family: PingFang SC;
font-size: 0.14rem;
font-weight: bold;
white-space: nowrap;"
          >
            xxx官方认证商家
          </div>
          <div class="bottombutton">
            <img src="../../static/popularityimgs/guanzhu.png" alt="" />
            <div>关注店铺</div>
          </div>
        </div>
        <div class="middle">
          <div class="title">
            泡泡龙
            <div
              style="width: 0.6rem;
height: 0.26rem;
border-radius: 0.2rem;background: #FFC766; color: #000000;font-family: PingFang SC;
font-size: 0.12rem;
font-weight: 500;
text-align: center;
line-height: 0.24rem;
margin-top: 0.05rem;
margin-left: 0.08rem;"
            >
              1年店
            </div>
          </div>
          <div class="button">
            <div class="leftbutton">店铺网址</div>
            <span
              style="font-family: PingFang SC;
font-size: 0.14rem;color: #399EF1;"
              >https://www.5ts.com/shop.htm?id=61451</span
            >
          </div>
          <div class="text">
            <div>
              <span>商品数量：45款</span>
              <span>实名认证：已认证</span>
              <span>商家地址：新疆乌苏市新石南路8号楼4单元605号</span>
            </div>
            <div>
              <span>最近上新：2023- 10 - 07 </span>
              <span>商家电话：13295088867</span>
              <span style="display: flex; align-items: center; cursor: pointer;"
                >联系方式：<img src="../../assets/image/bottom/wx.png" alt=""
              /></span>
            </div>
          </div>
        </div>
        <div class="right">
          <img
            v-for="item in 5"
            src="../../static/popularityimgs/topimg.png"
            alt=""
          />
          <div class="more">
            <div>更多商品</div>
            <div>more>></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      screenlist: [
        '全部',
        '大河村',
        '织里镇',
        '温岭童鞋',
        '温岭童鞋',
        '温岭童鞋',
        '温岭童鞋',
        '温岭童鞋',
        '温岭童鞋',
        '温岭童鞋',
        '温岭童鞋'
      ],
      Letterlist: [
        '全部',
        '数字0-9',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      toplist: ['综合', '人气商家', '新入驻商家'],
      activeindex: 0,
      letterindex: 0,
      topindex: 0
    }
  },
  created () {},
  methods: {
    changeitem (index) {
      this.activeindex = index
    },
    changeLetter (index) {
      this.letterindex = index
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  width: 12rem;
  margin: 0 auto;
  // height: 100vh;
  background-color: #f5f7f9;
  overflow-x: hidden;
  .turning {
    margin-bottom: 0.2rem;
    width: 100%;
    height: 0.6rem;
    // padding: 0.2rem;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    // background-color: red;
    border: 1px solid #e8e8e8;
    .leftbox {
      display: flex;
    }
    .leftbox div {
      height: calc(100%-0.4rem);
      padding: 0.2rem;
      font-family: PingFang SC;
      font-size: 0.14rem;
      font-weight: bold;
      cursor: pointer;
      color: #666666;
      border: 1px solid #e8e8e8;
    }
    .rightbox {
      font-family: PingFang SC;
      font-size: 0.14rem;
      font-weight: 500;
      color: #666666;
      line-height: 0.6rem;
    }
    .topactive {
      background: #e22a1f;
      color: white !important;
    }
  }
  .screen {
    width: calc(100%-0.56rem);
    height: 0.7rem;
    background-color: #fff;
    margin-top: 0.2rem;
    padding: 0.17rem 0.35rem 0.13rem 0.21rem;
    font-family: PingFang SC;
    font-size: 0.14rem;
    color: #3d3d3d;
    border: 1px solid #e8e8e8;

    .Letter {
      display: flex;
      .item {
        text-align: center !important;
        padding: 0.04rem 0;
        // width: 0.54rem;
        height: 0.2rem;
        // border-radius: 0.04rem;
        // background-color: #e22a1f;
        margin-top: -0.04rem;
        // margin-left: 0.26rem;
        font-family: PingFang SC;
        font-size: 0.14rem;
        color: #666666;
        line-height: 0.2rem;
        display: inline-block;
        cursor: pointer;
      }
    }
  }
  .result {
    margin-bottom: 0.25rem;
    // height: 100vh;
    width: 100%;
    // background-color: black;
    .resultitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.65rem;
      width: calc(100%-0.22rem);
      background-color: white;
      padding: 0.2rem 0.22rem 0.15rem 0;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 1.07rem;
        height: 0.95rem;
        border-right: 0.5px solid #e8e8e8;
        padding: 0.33rem 0.58rem 0.32rem 0.54rem;
        .bottombutton {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #ec6c15;
          width: 0.8rem;
          // height: 10.19rem;
          border-radius: 10px;
          text-align: center;
          border: 0.01rem solid #ec6c15;
        }
      }
      .middle {
        flex: 1;
        margin-left: 0.3rem;
        width: 100%;
        // background-color: green;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        .title {
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-size: 0.24rem;
          font-weight: bold;
          color: #000000;
          margin-bottom: 0.14rem;
        }
        .button {
          display: flex;
          align-items: center;
          margin-bottom: 0.19rem;
          .leftbutton {
            width: 0.8rem;
            height: 0.26rem;
            border-radius: 0.04rem;
            background: #ec6c15;
            text-align: center;
            line-height: 0.26rem;
            font-family: PingFang SC;
            font-size: 0.14rem;
            color: #ffffff;
            margin-right: 0.11rem;
          }
        }
        .text {
          flex: 1;
          display: flex;

          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #666666;
        }
        .text div:nth-child(2) {
          margin-left: 0.56rem;
        }
        .text span {
          display: block;
          margin-bottom: 0.115rem;
        }
      }
      .right {
        width: 2.7rem;
        background-color: black;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        .more {
          cursor: pointer;
          height: 0.74rem;
          width: 0.74rem;
          background: #e8e8e8;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .more div:first-child {
          font-family: PingFang SC;
          font-size: 0.13rem;
          font-weight: 600;
          color: #000000;
        }
        .more div:last-child {
          font-family: PingFang SC;
          font-size: 0.12rem;
          color: #666666;
        }
      }
    }
  }
  .screen div:first-child {
    margin-bottom: 0.1rem;
    display: flex;
  }
  .screen div .item {
    text-align: center !important;
    padding: 0.04rem 0.08rem;
    // width: 0.54rem;
    height: 0.2rem;
    border-radius: 0.04rem;
    // background-color: #e22a1f;
    margin-top: -0.04rem;
    margin-left: 0.26rem;
    font-family: PingFang SC;
    font-size: 0.14rem;
    color: #666666;

    line-height: 0.2rem;
    display: inline-block;
    cursor: pointer;
  }
  .active {
    background: #e22a1f;
    color: #ffffff !important;
  }
  .letteractive {
    border-bottom: 0.05rem solid #e22a1f;
    color: #e22a1f !important;
    font-weight: 600;
  }
}
</style>
